<script setup lang='ts'>
  import { reactive } from 'vue';
  import { guild_roomApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  import { getDateArray, getPlayEndTime } from '@/utils';
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    dateArr:getDateArray('ymdhis') as Array<any>,
    list:[] as Array<any>,
    room_id:0
  })
  const getList = async()=>{
    const loading = Toastloading()
    const { room_id } = action
    const timeObi = getPlayEndTime(action.dateArr)
    const res = await guild_roomApi.getRoomShotoff(room_id,{
      date_type:'month',
      value:[timeObi.playTime,timeObi.endTime]
    })
    const { data=[] } = res.data
    action.list = data
    loading.close()
  }
  const openDialog = async(query:any = {})=> {
    const { room_id=0,name='' } = query
    action.room_id = room_id
    action.title = `${name}房间-踢人列表`
    await getList()
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog"
    v-model="action.dialogFormVisible"
    width="60%"
    :title="action.title">
    <div class="labelBox">
      <div class="labelItem">
        <div class="label">日期：</div>
        <el-date-picker
          v-model="action.dateArr"
          type="datetimerange"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </div>
      <div class="labelItem">
        <el-button type="primary" @click="getList">查询</el-button>
      </div>
    </div>
    <el-table class="xm-TableCenter" height="500px" :data="action.list" border>
      <el-table-column min-width="120" prop="user_uuid" label="操作人uuid" />
      <el-table-column min-width="120" prop="user_name" label="操作人昵称" />
      <el-table-column min-width="120" prop="shottff_uuid" label="被踢人uuid" />
      <el-table-column min-width="120" prop="shottff_name" label="被踢人昵称" />
      <el-table-column min-width="180" prop="date_time" label="操作时间" />
    </el-table>
    </el-dialog>
  </div>
</template>